<template>
	<Echarts class="card" :option="option" :height="height" :events="events" />
</template>

<script setup lang="ts" name="columnChart">
import { ref, onMounted } from 'vue'
const height = ref('100%')
const option = ref({})
const events = ref({})

const refreshOption = () => {
	option.value = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			textStyle: {
				color: '#a1a1a1'
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				axisLabel: {
					color: '#a1a1a1'
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				axisLabel: {
					color: '#a1a1a1'
				}
			}
		],
		series: [
			{
				name: 'Direct',
				type: 'bar',
				emphasis: {
					focus: 'series'
				},
				data: Array.from({ length: 7 }).map(() => Math.floor(Math.random() * 1000))
			},
			{
				name: 'Email',
				type: 'bar',
				stack: 'Ad',
				emphasis: {
					focus: 'series'
				},
				data: Array.from({ length: 7 }).map(() => Math.floor(Math.random() * 1000))
			},
			{
				name: 'Union Ads',
				type: 'bar',
				stack: 'Ad',
				emphasis: {
					focus: 'series'
				},
				data: Array.from({ length: 7 }).map(() => Math.floor(Math.random() * 1000))
			},
			{
				name: 'Video Ads',
				type: 'bar',
				stack: 'Ad',
				emphasis: {
					focus: 'series'
				},
				data: Array.from({ length: 7 }).map(() => Math.floor(Math.random() * 1000))
			},
			{
				name: 'Search Engine',
				type: 'bar',
				data: Array.from({ length: 7 }).map(() => Math.floor(Math.random() * 1000)),
				emphasis: {
					focus: 'series'
				},
				markLine: {
					lineStyle: {
						type: 'dashed'
					},
					data: [[{ type: 'min' }, { type: 'max' }]]
				}
			},
			{
				name: 'Baidu',
				type: 'bar',
				barWidth: 5,
				stack: 'Search Engine',
				emphasis: {
					focus: 'series'
				},
				data: Array.from({ length: 7 }).map(() => Math.floor(Math.random() * 1000))
			},
			{
				name: 'Google',
				type: 'bar',
				stack: 'Search Engine',
				emphasis: {
					focus: 'series'
				},
				data: Array.from({ length: 7 }).map(() => Math.floor(Math.random() * 1000))
			},
			{
				name: 'Bing',
				type: 'bar',
				stack: 'Search Engine',
				emphasis: {
					focus: 'series'
				},
				data: Array.from({ length: 7 }).map(() => Math.floor(Math.random() * 1000))
			},
			{
				name: 'Others',
				type: 'bar',
				stack: 'Search Engine',
				emphasis: {
					focus: 'series'
				},
				data: Array.from({ length: 7 }).map(() => Math.floor(Math.random() * 1000))
			}
		]
	}
}

const clickHandler = (params: any) => {
	console.log('点击', params)
}

const contextmenuHandler = (params: any) => {
	console.log('右键', params)
}

events.value = {
	click: clickHandler,
	contextmenu: contextmenuHandler
}
onMounted(() => {
	refreshOption()
	setInterval(() => {
		// height.value = Math.floor(Math.random() * 1000) + 'px'
		refreshOption()
	}, 2000)

	setTimeout(() => {
		console.log('只剩下右击事件')
		events.value = {
			contextmenu: contextmenuHandler
		}
	}, 5000)
})
</script>
